<template> 
  <div class="internship-container"> 
    <el-card shadow="never"> 
      <!-- 搜索栏 --> 
      <div class="filter-header"> 
        <el-input 
          v-model="filter.id"  
          placeholder="编号" 
          style="width: 100px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.studentId"  
          placeholder="学生学号" 
          style="width: 120px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.studentName"  
          placeholder="学生姓名" 
          style="width: 120px; margin-left: 10px" 
          class="filter-item" 
        /> 
        <el-input 
          v-model="filter.status"  
          placeholder="审核状态：无" 
          style="width: 140px; margin-left: 10px" 
          class="filter-item" 
          disabled 
        /> 
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button> 
        <el-button style="margin-left: 10px" @click="resetFilter">重置</el-button> 
      </div> 
 
      <!-- 操作按钮 --> 
      <div class="action-buttons"> 
        <el-button type="text" style="color: #67C23A" @click="confirmAgree">同意</el-button> 
        <el-button type="text" style="color: #409EFF; margin-left: 15px" @click="confirmSubmit">提交</el-button> 
      </div> 
 
      <!-- 数据表格 --> 
      <el-table 
        ref="table" 
        :data="filteredTableData" 
        style="width: 100%" 
        header-row-class-name="table-header" 
      > 
        <el-table-column type="selection" width="45" align="center"/> 
        <el-table-column prop="id" label="编号" width="80"/> 
        <el-table-column prop="name" label="名称" width="120"/> 
        <el-table-column prop="requirement" label="申请要求" width="120"/> 
        <el-table-column prop="start_time" label="开始时间" width="120"/> 
        <el-table-column prop="end_time" label="结束时间" width="120"/> 
        <el-table-column prop="company" label="实习单位名称" width="150"/> 
        <el-table-column prop="company_info" label="实习单位简介" width="150"/> 
        <el-table-column label="学生学号" width="120"> 
          <template slot-scope="scope"> 
            {{ scope.row.student_id  }} | {{ scope.row.student_name  }} 
          </template> 
        </el-table-column> 
        <el-table-column prop="status" label="审核状态" width="100" align="center"> 
          <template slot-scope="scope"> 
            <el-tag type="success" size="small">{{ scope.row.status  }}</el-tag> 
          </template> 
        </el-table-column> 
        <el-table-column label="操作" width="100" align="center"> 
          <template slot-scope="scope"> 
            <el-button type="text" size="mini" @click="editInternship(scope.row)"> 修改</el-button> 
          </template> 
        </el-table-column> 
      </el-table> 
 
      <!-- 分页信息 --> 
      <div class="pagination-info"> 
        第 1 到 {{ filteredTableData.length  }} 条，共 {{ filteredTableData.length  }} 条记录。 
      </div> 
    </el-card> 
 
    <!-- Edit Dialog --> 
    <el-dialog :visible.sync="editDialogVisible"  title="修改实习信息"> 
      <el-form :model="currentInternship"> 
        <el-form-item label="名称"> 
          <el-input v-model="currentInternship.name"></el-input>  
        </el-form-item> 
        <el-form-item label="申请要求"> 
          <el-input v-model="currentInternship.requirement"></el-input>  
        </el-form-item> 
 
        <!-- Start Date Picker --> 
        <el-form-item label="开始时间"> 
          <el-date-picker 
            v-model="currentInternship.start_time"  
            format="yyyy-MM-dd" 
            value-format="yyyy-MM-dd" 
            placeholder="选择开始时间" 
          > 
          </el-date-picker> 
        </el-form-item> 
 
        <!-- End Date Picker --> 
        <el-form-item label="结束时间"> 
          <el-date-picker 
            v-model="currentInternship.end_time"  
            format="yyyy-MM-dd" 
            value-format="yyyy-MM-dd" 
            placeholder="选择结束时间" 
          > 
          </el-date-picker> 
        </el-form-item> 
 
        <el-form-item label="实习单位名称"> 
          <el-input v-model="currentInternship.company"></el-input>  
        </el-form-item> 
        <el-form-item label="实习单位简介"> 
          <el-input v-model="currentInternship.company_info"></el-input>  
        </el-form-item> 
      </el-form> 
      <span slot="footer" class="dialog-footer"> 
        <el-button @click="editDialogVisible = false">取 消</el-button> 
        <el-button type="primary" @click="saveInternship">保 存</el-button> 
      </span> 
    </el-dialog> 
 
    <!-- Confirm Agree Dialog --> 
    <el-dialog :visible.sync="agreeDialogVisible"  title="确认同意"> 
      <span>您确认同意选定的实习申请吗？</span> 
      <span slot="footer" class="dialog-footer"> 
        <el-button @click="agreeDialogVisible = false">取 消</el-button> 
        <el-button type="primary" @click="agreeInternship">确 定</el-button> 
      </span> 
    </el-dialog> 
 
    <!-- Confirm Submit Dialog --> 
    <el-dialog :visible.sync="submitDialogVisible"  title="确认提交"> 
      <span>您确认提交选定的实习申请吗？</span> 
      <span slot="footer" class="dialog-footer"> 
        <el-button @click="submitDialogVisible = false">取 消</el-button> 
        <el-button type="primary" @click="submitInternship">确 定</el-button> 
      </span> 
    </el-dialog> 
  </div> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      filter: { 
        id: '', 
        studentId: '', 
        studentName: '', 
        status: '无' 
      }, 
      tableData: [ 
        { 
          id: 3, 
          name: '生产实习', 
          requirement: '无挂科', 
          start_time: '2022-01-02', 
          end_time: '2023-02-28', 
          company: '华为', 
          company_info: '无', 
          student_id: '1', 
          student_name: '冯婷', 
          status: '通过' 
        }, 
        { 
          id: 6, 
          name: '生产实习', 
          requirement: '无挂科', 
          start_time: '2022-01-02', 
          end_time: '2023-02-28', 
          company: '华为', 
          company_info: '无', 
          student_id: '48', 
          student_name: '王旭', 
          status: '通过' 
        } 
      ], 
      filteredTableData: [], 
      currentInternship: {}, 
      editDialogVisible: false, 
      agreeDialogVisible: false, 
      submitDialogVisible: false, 
    }; 
  }, 
 
  created() { 
    this.filteredTableData  = this.tableData;  
  }, 
 
  methods: { 
    handleSearch() { 
      this.filteredTableData  = this.tableData.filter(item  => { 
        return ( 
          (this.filter.id  ? item.id.toString().includes(this.filter.id)  : true) && 
          (this.filter.studentId  ? item.student_id.includes(this.filter.studentId)  : true) && 
          (this.filter.studentName  ? item.student_name.includes(this.filter.studentName)  : true) 
        ); 
      }); 
    }, 
 
    resetFilter() { 
      this.filter  = { 
        id: '', 
        studentId: '', 
        studentName: '', 
        status: '无' 
      }; 
      this.filteredTableData  = this.tableData;  
    }, 
 
    confirmAgree() { 
      this.agreeDialogVisible  = true; 
    }, 
 
    agreeInternship() { 
      // Logic to agree to the selected internships (not implemented) 
      const selectedRows = this.$refs.table.selection;  
      console.log('Agreed  to:', selectedRows); 
      this.agreeDialogVisible  = false; 
    }, 
 
    confirmSubmit() { 
      this.submitDialogVisible  = true; 
    }, 
 
    submitInternship() { 
      // Logic to submit the selected internships (not implemented) 
      const selectedRows = this.$refs.table.selection;  
      console.log('Submitted:',  selectedRows); 
      this.submitDialogVisible  = false; 
    }, 
 
    editInternship(internship) { 
      this.currentInternship  = { ...internship }; // Clone internship to edit 
      this.editDialogVisible  = true; 
    }, 
 
    saveInternship() { 
      // Logic for saving the internship changes 
      const index = this.tableData.findIndex(item  => item.id  === this.currentInternship.id);  
      if (index !== -1) { 
        this.tableData.splice(index,  1, this.currentInternship);  
      } 
      this.editDialogVisible  = false; 
      console.log('Saved  internship:', this.currentInternship);  
    }, 
  } 
}; 
</script> 
 
<style scoped> 
.internship-container { 
  padding: 20px; 
} 
 
.filter-header { 
  display: flex; 
  align-items: center; 
  margin-bottom: 20px; 
} 
 
.filter-item { 
  margin-left: 10px; 
} 
 
.action-buttons { 
  margin: 15px 0; 
  padding-left: 10px; 
} 
 
.table-header th { 
  background-color: #f5f7fa !important; 
  font-weight: 600; 
} 
 
.pagination-info { 
  margin-top: 15px; 
  color: #909399; 
  font-size: 13px; 
  text-align: center; 
} 
 
.el-tag { 
  padding: 0 8px; 
  height: 24px; 
  line-height: 22px; 
} 
 
/* 复选框样式调整 */ 
.el-table__header .el-checkbox__inner { 
  border-radius: 2px; 
  border-color: #DCDFE6; 
} 
</style> 